<template>
  <section>
    <el-card shadow="never" class="cardBox">
      <div slot="header" class="clearfix">
        <span>报价信息</span>
      </div>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane v-for="item of tabs" :key="item.id" :label="item.name" :name="item.value"></el-tab-pane>
      </el-tabs>
      <el-table :data="tableData" max-height="300" border style="width: 100%">
        <el-table-column prop="offer_no" label="报价单号" width="180"></el-table-column>
        <el-table-column prop="type" label="报价类型" width="180">
          <template slot-scope="scope">
            <span>{{scope.row.type === "sale" ? '售电' : '购电'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="quantity" label="数量（度）"></el-table-column>
        <el-table-column prop="min_txn_qty" label="最小交易量（度）"></el-table-column>
        <el-table-column prop="show_price" label="价格（元）"></el-table-column>
        <el-table-column prop="min_credit" label="信誉度"></el-table-column>
        <el-table-column prop="txid" label="区块链交易ID"></el-table-column>
        <el-table-column prop="deal_qty" label="已交易量（度）"></el-table-column>
        <el-table-column label="完成度">
          <template slot-scope="scope">
            <span>{{Math.round((scope.row.deal_qty / scope.row.quantity) * 100 * 100) / 100}}%</span>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="备注">
          <template slot-scope="scope">
            <el-button v-if="userRole !== 'grid' && scope.row.type === 'sale' && scope.row.offerer_did !== userDid" type="primary" size="small" @click="handlePurchase(scope.row)">我要购电</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-row type="flex" justify="end">
      <Page
        @handleSizeChange="handleSizeChange"
        @handlePageChanged="handlePageChanged"
        :page.sync="pageNo"
        :pageView.sync="pageSize"
        :totalElements.sync="total"
      />
    </el-row>

    <el-dialog
      :title="dlgTitle"
      :visible.sync="dlgVib"
      @closed="closeDlg"
      append-to-body
      :width="width"
    >
      <component
        ref="dlgCpt"
        :is="dlgCpt"
        :data="rowData"
        :action="activeName"
        @close="closeDlg"
        @refresh="init"
      />
    </el-dialog>
  </section>
</template>
<script lang='ts'>
import { Vue, Component, Watch, Prop } from "vue-property-decorator";
import Purchase from "./purchase.vue";
import Page from "@/components/page.vue";
@Component({
  components: {
    Page,
    Purchase
  }
})
export default class MyApplication extends Vue {
  @Prop()
  protected situationData: any = {
    tpno: null
  };
  protected userRole : string = "";
  protected userDid : string = "";

  protected total: number = 0;
  protected pageNo: number = 1;
  protected pageSize: number = 10;

  // for diog
  protected dlgVib: boolean = false;
  protected dlgTitle: string = "";
  protected dlgCpt: any = null;
  protected width: any = "";
  protected rowData: any = null;
  protected activeName: any = null;
  // TODO
  protected tabs: any = [
    { name: "全部", value: null, id: 0 },
    { name: "购电", value: "buy", id: 1 },
    { name: "售电", value: "sale", id: 2 }
  ];
  protected tableData: any = [];

  protected created() {
    this.init();
    this.$nextTick(() => {
      const user = JSON.parse(localStorage.getItem("userInfo") as any);
      this.userRole = user && user.type;
      this.userDid =  user&& user.did
    });
  }
  @Watch("situationData", { immediate: true, deep: true })
  protected async init() {
    const params: any = {
      tpno: this.situationData.tpno,
      page_no: this.pageNo,
      page_size: this.pageSize,
    };
    if (this.activeName !== '0') {
      params.type = this.activeName
    }
    await this.$api.getOffersQuery(params).then((response: any) => {
      const {
        data: {
          offers,
          paginator: { page_no, page_size, total_count }
        }
      } = response;
      this.pageNo = page_no;
      this.total = total_count;
      offers.forEach((el: any) => {
        const price = "show_price";
        el[price] = Vue.prototype.$coinToYuan(el.price);
      });
      this.$set(this, "tableData", offers);
    });
  }
  protected handleClick() {
    this.init();
  }
  protected handlePageChanged(val: number) {
    this.pageNo = val;
    this.init();
  }
  protected handleSizeChange(val: number) {
    this.pageSize = val;
    this.pageNo = 1;
    this.init();
  }
  protected handlePurchase(row: any) {
    this.rowData = JSON.parse(JSON.stringify(row));
    this.dlgTitle = "我要购电";
    this.dlgCpt = Purchase;
    this.dlgVib = true;
    this.width = "50%";
  }
  protected closeDlg() {
    this.dlgTitle = "";
    this.dlgCpt = null;
    this.dlgVib = false;
    this.width = "";
    this.init();
  }
}
</script>

<style lang="scss" scoped>
</style>
